<template>
  <div>
    <div class="content-header"></div>
    <div class="content">
      <div class="container">
        <div style="margin-buttom:10px;">请输入待转换的SQL语句plus：</div>
        <el-alert title="Tip：" type="info" style="margin:10px;" show-icon :closable="false">
          支持一对多映射和javabean生成(新增),支持在SQL中嵌入Mybatis的动态参数，系统会自动识别参数，并生成对应的条件控制语句
          <a
            href="javascript:;"
            @click="showDynamicParamsDemo = true"
          >查看示例</a>
        </el-alert>

        <el-row :gutter="5">
          <el-col :span="12">
            <div class="code">
                <h4>输入sql</h4>
                <codemirror v-model="sqlCode" :options="cmOptions" />
            </div>
           </el-col>
          <el-col :span="4">
             <div class="sbutton">
              <el-button type="primary" @click="genAst">预览ast</el-button>
            </div>
            <div class="sbutton">
              <el-button type="primary" @click="genCode">生成代码</el-button>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="code">
                <h4>ast解析结果</h4>
                <codemirror v-model="aststr" :options="jsonOptions" />
            </div>
          </el-col>
        </el-row>

        <el-dialog title="SQL转代码的输出配置" :visible.sync="showDtoConfig" width="60%" top="5vh">
          <dto-strategy-form-plus ref="genDialog" :sql="res" @done="showDtoConfig = false"></dto-strategy-form-plus>
        </el-dialog>

      </div>
      <el-dialog
        :modal="false"
        title="动态SQL增强示例"
        :visible.sync="showDynamicParamsDemo"
        width="80%"
        top="5vh"
      >
        <dynamic-sql-plus-demo></dynamic-sql-plus-demo>
      </el-dialog>
    </div>
  </div>
</template>

<style>
    .code .CodeMirror {
        height: 698px !important;
    }

    .sbutton {
        text-align: center;
        margin-top: 40px;
    }

</style>

<script>
import { codemirror } from "vue-codemirror";
import "codemirror/mode/sql/sql.js";
import "codemirror/lib/codemirror.css";
import "codemirror/theme/solarized.css";
import HelpTip from "@/components/HelpTip";
import Axios from "axios";
import { Base64 } from "js-base64";
import DtoStrategyFormPlus from "@/components/DtoStrategyFormPlus";
import DynamicSqlPlusDemo from "@/components/DynamicSqlPlusDemo";

import parser from "@/assets/js/sqlparser.js"

import astTransform from './ast.js'

export default {
  components: {
    DynamicSqlPlusDemo,
    codemirror,
    HelpTip,
    DtoStrategyFormPlus,
  },
  data() {
    return {
      showDynamicParamsDemo: false,
      showDtoConfig: false,
      sqlCode: "",
      encodedSQL: "",
      res:{},
      ast:{
        message: '请输入sql'
      },
      cmOptions: {
        tabSize: 4,
        styleActiveLine: true,
        lineNumbers: true,
        line: true,
        mode: "text/x-mysql",
        theme: "solarized light",
      },
      jsonOptions: {
          tabSize: 4,
          readOnly: true,
          styleActiveLine: true,
          lineNumbers: true,
          line: true,
          mode: "text/javascript",
          theme: "solarized light",
        },
    };
  },
  computed:{
    aststr(){
        return JSON.stringify(this.ast,null,4)
    }
  },
  methods: {
    genAst() {
      if (!this.sqlCode) {
        this.$message.error("请先输入SQL语句");
        return;
      }
        var ast;
       try{
       let sql = this.sqlCode;
        ast = parser.parse(sql)
        console.log(ast)
        this.ast=ast
       }catch(e){
           console.log(1,e)
           let message = e.message;
           this.ast={message};
       }
    },
    genCode(){
       this.genAst();

          //预处理ast，再返回给后台生成代码

          //mapper  resultMapper  select  javaBean  service  controller
          let rootBean = astTransform.genRootBean(this.ast);
          let beans = [];
          astTransform.genBean(rootBean,beans)

          let obj = {
            mapper:astTransform.genMapper(this.ast),
            resultMapper: astTransform.genResultMapper(this.ast),
            select: astTransform.genSql(this.ast),
            beans: beans
          }

          console.log(obj)
          this.res=obj;

         this.encodedSQL = Base64.encodeURI(this.sqlCode);
         this.showDtoConfig = true;
         console.log(this.$refs)
         let dialog = this.$refs['genDialog'];
         if(dialog){
            dialog.getDesc();
         }
    },
  },
};
</script>
